<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Upload File</title>
</head>
<body>
<h1>Upload File</h1>
<form method="POST" action="/api/files/upload" enctype="multipart/form-data" onsubmit="return validateFileSize()">
    <input type="file" id="fileInput" name="file" required/>
    <select name="type" id="fileType">
        <option value="pdf">PDF (max 90MB)</option>
        <option value="video">Video (max 90MB)</option>
        <option value="other">Other (max 5MB)</option>
    </select>
    <button type="submit">Upload</button>
</form>

<script>
    function validateFileSize() {
        const fileInput = document.getElementById('fileInput');
        const fileType = document.getElementById('fileType').value;
        const fileSize = fileInput.files[0].size;

        let maxSizeInBytes;
        if (fileType === 'pdf' || fileType === 'video') {
            maxSizeInBytes = 90 * 1024 * 1024; // 90 MB
        } else {
            maxSizeInBytes = 5 * 1024 * 1024; // 5 MB
        }

        if (fileSize > maxSizeInBytes) {
            alert(`File size exceeds the limit of ${maxSizeInBytes / (1024 * 1024)}MB.`);
            return false;
        }

        return true;
    }
</script>
</body>
</html>